<script setup>
  import { ref, computed } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { toast } from '@/utils/utils'
  import { reportException } from '@/apis/task.js'
  const popup = ref(null)
  // 文件提示
  const exceptTime = computed(() => {
    return timePicker.value || '请选择'
  })

  // 异常日期
  const timePicker = ref('')

  // 上报位置数据
  const exceptionPlace = ref('')
  // 打开地图，选择位置
  async function onLocationChoose() {
    try {
      // 获取位置
      const { address } = await uni.chooseLocation({})
      exceptionPlace.value = address
    } catch (err) {}
  }

  // 打开异常类型弹层
  const ExceptionTypeValue = ref('')
  function onPopupOpen() {
    popup.value.open()
  }
  //显示异常类型选项
  const ExceptionType = ref([
    { type: '发动机启动困难', istrue: false },
    { type: '不着车，漏油', istrue: false },
    { type: '照明失灵', istrue: false },
    { type: '排烟异常、温度异常', istrue: false },
    { type: '其他问题', istrue: false },
  ])
  //临时变量存储checkboxValue的值
  const checkboxValue = ref('')
  //监听checkbox值改变事件
  const Type = ref([])
  const onchange = (e) => {
    Type.value = e.detail.value
    console.log(Type.value, '1223')
    checkboxValue.value = e.detail.value.join(',')
  }
  // 点击类型弹层确认按钮
  function onPopupConfirm() {
    // console.log(checkboxValue.value)
    // for (let i = 0; i < ExceptionType.value.length; i++) {
    //   for (let j = 0; j < Type.value.length; j++) {
    //     if (ExceptionType.value[i].type === Type.value[j]) {
    //       ExceptionType.value[i].istrue = !ExceptionType.value[i].istrue
    //     }
    //   }
    // }
    console.log(ExceptionType.value)
    ExceptionTypeValue.value = checkboxValue.value
    popup.value.close()
  }

  //使用计算属性来控制提交按钮
  const disabledSubmitBtn = computed(() => {
    return delayReason.value === '' || ExceptionTypeValue.value === '' || timePicker.value === ''
  })

  const delayReason = ref('') //异常描述
  const submit = async () => {
    const formData = {
      transportTaskId: query.value.id,
      exceptionTime: timePicker.value,
      exceptionPlace: exceptionPlace.value,
      exceptionType: ExceptionTypeValue.value,
      exceptionDescribe: delayReason.value,
      exceptionImagesList: cargoPickUpPictureList.value.map(({ url }) => ({
        url,
      })),
    }
    await reportException(formData)
    toast('上报异常成功', undefined, true)
    setTimeout(uni.switchTab, 1500, { url: '/pages/task/index' })
  }

  //提货凭证照片数组
  const cargoPickUpPictureList = ref([])
  const query = ref({})
  onLoad((_query) => {
    query.value = _query
    console.log(query.value)
  })
</script>

<template>
  <view class="page-container">
    <scroll-view class="scroll-view" scroll-y>
      <view style="margin: 30rpx" class="scroll-view-wrapper">
        <uni-list :border="false">
          <!-- 异常时间 -->
          <uni-list-item show-arrow title="异常时间">
            <template v-slot:footer>
              <uni-datetime-picker v-model="timePicker">
                <view class="picker-value">{{ exceptTime }}</view>
              </uni-datetime-picker>
            </template>
          </uni-list-item>
          <!-- 上报位置 -->
          <!-- clickable表示这是一个可点击的列表，并可以监听点击事件 -->
          <uni-list-item
            show-arrow
            clickable
            ellipsis="1"
            @click="onLocationChoose"
            title="上报位置"
            :rightText="exceptionPlace || '请选择'"
          />
          <!-- 异常类型 -->
          <uni-list-item
            show-arrow
            clickable
            @click="onPopupOpen"
            title="异常类型"
            :rightText="ExceptionTypeValue || '请选择'"
          />
          <!-- 异常描述 -->
          <uni-list-item direction="column" title="异常描述">
            <template v-slot:footer>
              <view class="textarea-wrapper">
                <textarea
                  class="textarea"
                  :class="{ error: delayReason.length > 50 }"
                  v-model="delayReason"
                  placeholder="请输入异常描述"
                ></textarea>
                <view class="words-count">{{ delayReason.length }}/50</view>
              </view>
            </template>
          </uni-list-item>
          <uni-list-item
            :border="false"
            style="margin-top: -30rpx"
            direction="column"
            title="上传图片（最多6张）"
          >
            <template v-slot:footer>
              <uni-file-picker limit="6" v-model="cargoPickUpPictureList"></uni-file-picker>
            </template>
          </uni-list-item>
        </uni-list>
      </view>
    </scroll-view>
    <view class="fixbar">
      <button :disabled="disabledSubmitBtn" class="button" @click="submit">提交</button>
    </view>
    <!-- 异常类型弹层 -->
    <!-- mask-click是否可以点击遮罩层关闭 -->
    <uni-popup ref="popup" :mask-click="true" type="bottom">
      <uni-list class="popup-action-sheet">
        <uni-list-item>
          <template v-slot:header>
            <view class="header">选择类型</view>
          </template>
        </uni-list-item>

        <uni-list-item>
          <template v-slot:body>
            <checkbox-group style="width: 100%" @change="onchange">
              <label
                v-for="(v, i) of ExceptionType"
                :key="i"
                style="display: flex; padding: 20rpx 10rpx; width: 100%"
              >
                <view>
                  <checkbox :value="v.type" :checked="v.istrue" color="#EF4F3F" />
                </view>
                <view>{{ v.type }}</view>
              </label>
            </checkbox-group>
          </template>
        </uni-list-item>
        <!--   <uni-list-item>
          <template v-slot:header>
            <view class="header">选择类型</view>
          </template>
        </uni-list-item>
        <uni-list-item title="发动机启动困难">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="不着车，漏油">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="照明失灵">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="排烟异常、温度异常">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item title="其他问题">
          <template v-slot:footer>
            <checkbox-group class="checkbox">
              <checkbox color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item> -->
        <uni-list-item>
          <template v-slot:body>
            <button @click="onPopupConfirm" class="button">确定</button>
          </template>
        </uni-list-item>
      </uni-list>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
